<template>
  <div class="call-police-list-page" :style="{ height: formatUnit(height) }">
    <el-table
      :data="props.dataList"
      border
      :style="{ width: width + 'px' }"
      :max-height="formatUnit(height)"
    >
      <el-table-column prop="createTime" label="日期" width="180">
        <template #default="scope">
          {{
            moment(new Date(scope.row.createTime)).format("YYYY-MM-DD HH:mm:ss")
          }}
        </template>
      </el-table-column>
      <el-table-column prop="keyid" label="编号" width="180" />
      <el-table-column prop="keyname" label="报警名称">
        <template #default="scope">
          {{
            keyName(scope.row.keyname, scope.row.warnvalue, scope.row.keyvalue)
          }}
        </template>
      </el-table-column>
      <el-table-column prop="warnvalue" label="报警数值">
        <template #default="scope">
          {{
            scope.row.warnvalue +
            labTable[scope.row.tablename][scope.row.columnname].unit
          }}
        </template>
      </el-table-column>
      <el-table-column prop="keyvalue" label="当前数值">
        <template #default="scope">
          {{
            scope.row.keyvalue +
            labTable[scope.row.tablename][scope.row.columnname].unit
          }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup name="CallPoliceList">
import labTable from "@/mixins/table.json";
import moment from "moment";
let props = defineProps({
  dataList: {
    type: Array,
  },
  height: {
    type: [Number,String],
  },
  width: {
    type: Number,
  },
});
// 计算属性
let formatUnit = computed(()=>{
  return (value) => typeof value == 'number' ? value + 'px' : value;
})
// watch(props.dataList, (newValue, oldValue) => {
//   console.log("====>");
// });

let keyName = computed(() => {
  return (str, warVal, keyVal) => {
    let strs = str;
    strs = str.replace("左", "左主机");
    strs = strs.replace("右", "右主机");
    if (keyVal > warVal) return strs + "高";
    if (keyVal < warVal) return strs + "低";
  };
});
</script>

<style scoped>
.call-police-list-page {
  display: flex;
  justify-content: center;
}
</style>
